<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Display and Video Stream</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f8f8;
    }

   .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
    }

   .data-item {
      background-color: #fff;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input[type="text"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #45a049;
    }

   .adjust-buttons {
      display: flex;
      justify-content: space-between;
    }

   .video-container {
      grid-column: span 2;
      border: 2px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      position: relative;
    }

   .video-container video {
      width: 100%;
      height: auto;
      border-radius: 6px;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 温度 -->
    <div class="data-item">
      <label for="Temp">Temp:</label>
      <input type="text" id="Temp">
      <div class="adjust-buttons">
        <button id="tempIncreaseBtn">增加</button>
        <button id="tempDecreaseBtn">减少</button>
      </div>
    </div>

    <!-- 门状态 -->
    <div class="data-item">
      <label for="Door">Door:</label>
      <input type="text" id="Door">
    </div>

    <!-- LED1 状态 -->
    <div class="data-item">
      <label for="Led1">Led1:</label>
      <input type="text" id="Led1">
      <div class="adjust-buttons">
        <button id="led1OnBtn">开</button>
        <button id="led1OffBtn">关</button>
      </div>
    </div>

    <!-- LED2 状态 -->
    <div class="data-item">
      <label for="Led2">Led2:</label>
      <input type="text" id="Led2">
      <div class="adjust-buttons">
        <button id="led2OnBtn">开</button>
        <button id="led2OffBtn">关</button>
      </div>
    </div>

    <!-- 风扇状态 -->
    <div class="data-item">
      <label for="Fan">Fan:</label>
      <input type="text" id="Fan">
      <div class="adjust-buttons">
        <button id="fanOnBtn">开</button>
        <button id="fanOffBtn">关</button>
      </div>
    </div>

    <!-- 电子钥匙状态 -->
    <div class="data-item">
      <label for="Ekey">Ekey:</label>
      <input type="text" id="Ekey">
      <div class="adjust-buttons">
        <button id="ekeyOnBtn">开</button>
        <button id="ekeyOffBtn">关</button>
      </div>
    </div>

    <!-- 湿度 -->
    <div class="data-item">
      <label for="Hum">Hum:</label>
      <input type="text" id="Hum">
      <div class="adjust-buttons">
        <button id="humIncreaseBtn">增加</button>
        <button id="humDecreaseBtn">减少</button>
      </div>
    </div>

    <!-- 外部温度 -->
    <div class="data-item">
      <label for="Etemp">Etemp:</label>
      <input type="text" id="Etemp">
    </div>

    <!-- 碳含量 -->
    <div class="data-item">
      <label for="Carbon">Carbon:</label>
      <input type="text" id="Carbon">
    </div>

    <!-- 转速 -->
    <div class="data-item">
      <label for="Revolution">Revolution:</label>
      <input type="text" id="Revolution">
      <div class="adjust-buttons">
        <button id="revolutionIncreaseBtn">增加</button>
        <button id="revolutionDecreaseBtn">减少</button>
      </div>
    </div>

    <!-- 主门状态 -->
    <div class="data-item">
      <label for="Mdoor">Mdoor:</label>
      <input type="text" id="Mdoor">
      <div class="adjust-buttons">
        <button id="mdoorOpenBtn">开</button>
        <button id="mdoorCloseBtn">关</button>
      </div>
    </div>

    <!-- 获取数据按钮 -->
    <div class="data-item">
      <button id="refreshBtn">获取数据</button>
    </div>

    <!-- 视频流容器 -->
    <div class="video-container">
      <img src="loading.gif" alt="加载中..." id="videoStream">
    </div>
  </div>

  <script>
    // 定义 URL
    const url = 'http://192.168.220.132:8090/bb.html';

    // 发送 AJAX 请求的通用函数
    function sendRequest(action, callback) {
      const xhr = new XMLHttpRequest();
      xhr.open('post', url, true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            const response = xhr.responseText;
            const data = response.split('/');
            callback(data);
          } else {
            console.error('请求失败：', xhr.status);
          }
        }
      };
      xhr.send(action);
    }

    // 连接服务器，接收数据
    document.getElementById("refreshBtn").addEventListener("click", function () {
      sendRequest('updata', function (data) {
        document.getElementById('Temp').value = data[0];
        document.getElementById('Door').value = data[1];
        document.getElementById('Led1').value = data[2];
        document.getElementById('Led2').value = data[3];
        document.getElementById('Fan').value = data[4];
        document.getElementById('Ekey').value = data[5];
        document.getElementById('Hum').value = data[6];
        document.getElementById('Etemp').value = data[7];
        document.getElementById('Revolution').value = data[8];
        document.getElementById('Carbon').value = data[9];
        document.getElementById('Mdoor').value = data[10];
      });
    });

    // 温度增加按钮
    document.getElementById("tempIncreaseBtn").addEventListener("click", function () {
      sendRequest('upTemp', function (data) {
        document.getElementById('Temp').value = data[0];
      });
    });

    // 温度减少按钮
    document.getElementById("tempDecreaseBtn").addEventListener("click", function () {
      sendRequest('downTemp', function (data) {
        document.getElementById('Temp').value = data[0];
      });
    });

    // 湿度增加按钮
    document.getElementById("humIncreaseBtn").addEventListener("click", function () {
      sendRequest('upHum', function (data) {
        document.getElementById('Hum').value = data[6];
      });
    });

    // 湿度减少按钮
    document.getElementById("humDecreaseBtn").addEventListener("click", function () {
      sendRequest('downHum', function (data) {
        document.getElementById('Hum').value = data[6];
      });
    });

    // 转速增加按钮
    document.getElementById("revolutionIncreaseBtn").addEventListener("click", function () {
      sendRequest('upRevolution', function (data) {
        document.getElementById('Revolution').value = data[8];
      });
    });

    // 转速减少按钮
    document.getElementById("revolutionDecreaseBtn").addEventListener("click", function () {
      sendRequest('downRevolution', function (data) {
        document.getElementById('Revolution').value = data[8];
      });
    });

    // LED1 开按钮
    document.getElementById("led1OnBtn").addEventListener("click", function () {
      sendRequest('onLed1', function (data) {
        document.getElementById('Led1').value = data[2];
      });
    });

    // LED1 关按钮
    document.getElementById("led1OffBtn").addEventListener("click", function () {
      sendRequest('offLed1', function (data) {
        document.getElementById('Led1').value = data[2];
      });
    });

    // LED2 开按钮
    document.getElementById("led2OnBtn").addEventListener("click", function () {
      sendRequest('onLed2', function (data) {
        document.getElementById('Led2').value = data[3];
      });
    });

    // LED2 关按钮
    document.getElementById("led2OffBtn").addEventListener("click", function () {
      sendRequest('offLed2', function (data) {
        document.getElementById('Led2').value = data[3];
      });
    });

    // 风扇开按钮
    document.getElementById("fanOnBtn").addEventListener("click", function () {
      sendRequest('onFan', function (data) {
        document.getElementById('Fan').value = data[4];
      });
    });

    // 风扇关按钮
    document.getElementById("fanOffBtn").addEventListener("click", function () {
      sendRequest('offFan', function (data) {
        document.getElementById('Fan').value = data[4];
      });
    });

    // 电子钥匙开按钮
    document.getElementById("ekeyOnBtn").addEventListener("click", function () {
      sendRequest('onEkey', function (data) {
        document.getElementById('Ekey').value = data[5];
      });
    });

    // 电子钥匙关按钮
    document.getElementById("ekeyOffBtn").addEventListener("click", function () {
      sendRequest('offEkey', function (data) {
        document.getElementById('Ekey').value = data[5];
      });
    });

    // 主门开按钮
    document.getElementById("mdoorOpenBtn").addEventListener("click", function () {
      sendRequest('onMdoor', function (data) {
        document.getElementById('Mdoor').value = data[10];
      });
    });

    // 主门关按钮
    document.getElementById("mdoorCloseBtn").addEventListener("click", function () {
      sendRequest('offMdoor', function (data) {
        document.getElementById('Mdoor').value = data[10];
      });
    });

    // 获取视频流
    function fetchVideoStream() {
      const videoStream = document.getElementById('videoStream');
      videoStream.src = 'http://192.168.220.132:8080/?action=stream';
    }

    fetchVideoStream();
  </script>
</body>

</html>